<template>
  <div>
    <div class="breadcrumb-box">
      <div class="w-[90%] xl:w-[1200px] mx-auto text-[#222] transition-all">
        <nuxt-link to="/">首页</nuxt-link> >
        <nuxt-link to="/case">案例展示</nuxt-link> > 案例详情
      </div>
    </div>
    <div class="news-con w-[90%] xl:w-[1200px] py-[50px]">
      <h1 class="text-2xl lg:text-4xl xl:text-[44px] text-[#222]">
        {{ detail.title || '标题' }}
      </h1>
      <div class="text-sm text-[#666] mt-5">{{ detail.createTime }}</div>
      <div class="mt-[10px] mb-12 border border-[rgba(34, 34, 34, .09)]"></div>
      <!-- eslint-disable vue/no-v-html -->
      <div v-html="detail.content"></div>
      <!--eslint-enable-->
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData({params}) {
    const { data } = await axios({
      url: 'https://erp.hnlhzw.cn/official/article/api/get/detail',
        method: 'get',
        params: { articleId : params.id},
      })
    return { detail: data }
  },
  data() {
    return {
      detail: '',
    }
  },
  head(){
    return {
      title: this.detail.title + '-联合智为'
    }
  }
}
</script>

<style scoped>
.breadcrumb-box {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  background: #f2f3f5;
  border: 1px solid #f4f4f4;
}
.news-con {
  margin: 0 auto;
}
.news-con ::v-deep img {
  display: inline-block;
  box-sizing: inherit;
}
</style>
